<template>
	<div class="time_meal">
		<x-header title="经营详情" :left-options="{backText: '✖'}">
		</x-header>
		<div class="content">
			<div class="time_nav">
				<tab>
					<tab-item :selected="selectIndex===0" @on-item-click="onItemClick">昨日</tab-item>
					<tab-item :selected="selectIndex===1" @on-item-click="onItemClick">近7天</tab-item>
					<tab-item :selected="selectIndex===2" @on-item-click="onItemClick">近30天</tab-item>
					<tab-item :selected="selectIndex===3" @on-item-click="onItemClick">自定义</tab-item>
				</tab>
				<div class="select_dates" v-if="selectIndex===3">
					<div class="select_dates_left">
						<group>
							<datetime placeholder="开始日期" v-model="value1" @on-change="change1" @on-cancel="log1('cancel')" @on-confirm="onConfirm1" @on-hide="log1('hide', $event)"></datetime>
						</group>
					</div>
					<p style="padding-top: .2rem;">至</p>
					<div class="select_dates_right">
						<group>
							<datetime placeholder="结束日期" v-model="value2" @on-change="change2" @on-cancel="log2('cancel')" @on-confirm="onConfirm2" @on-hide="log2('hide', $event)"></datetime>
						</group>
					</div>
				</div>
			</div>
			<div class="statistics_num">
				<div class="business_volume news">
					<p>营业额<span>新</span><img src="../../assets/images/statistics/help.jpg" alt="" /></p>
					<p>￥<span>0.00</span></p>
				</div>
				<div class="business_volume">
					<p v-if="selectIndex===0">比前1日</p>
					<p v-if="selectIndex===1">比前7日</p>
					<p v-if="selectIndex===2">比前30日</p>
					<p v-if="selectIndex===3">比前{{ differ_days }}日</p>
					<p style="color: #909090;">--</p>
				</div>
			</div>
			<div class="ratio_datas">
				<div class="time_place_nav">
					<tab>
						<tab-item :selected="selectIndex2===0" @on-item-click="onItemClick2">时段环比波动</tab-item>
						<tab-item :selected="selectIndex2===1" @on-item-click="onItemClick2">地段环比波动</tab-item>						
					</tab>
				</div>
				<div class="ratio_data_1" v-if="selectIndex2===0">
					<div class="time1">
						<p>早餐时段</p>
						<p>-0</p>
					</div>
					<div class="time1">
						<p>午餐时段</p>
						<p>-0</p>
					</div>
					<div class="time1">
						<p>下午茶时段</p>
						<p>-0</p>
					</div>
					<div class="time1">
						<p>晚餐时段</p>
						<p>-0</p>
					</div>
					<div class="time1" style="border-bottom:none;">
						<p>夜宵时段</p>
						<p>-0</p>
					</div>
				</div>
				<div class="ratio_data_2" v-if="selectIndex2===1"></div>
			</div>
		</div>
		<alert v-model="show1" title="提示" @on-show="onShow">{{ alert_title }}</alert>
	</div>
</template>

<script>
	import { setCookie,getCookie,removeCookie,clearCookie } from '@/assets/js/cookie'
	import { XHeader, Tab, TabItem, Datetime, Group, Alert } from 'vux';
	export default {
		name: 'time_meal',
		data() {
			return {
				selectIndex: 1, //0-昨日  1-近7天  2-近30天  3-自定义
				value1: '', //开始日期
				value2: '', //结束日期
				differ_days: 0, //相差的天数
				show1: false,
				alert_title: '',
				selectIndex2: 0, //0-时段环比波动  1-地段环比波动 
			}
		},
		components: {
			XHeader,
			Tab,
			TabItem,
			Datetime,
			Group,
			Alert
		},
		computed:{
			
		},
		created(){
			this.selectIndex = +this.$route.params.id;
		},
		methods:{
			//时间切换
			onItemClick(index) {
				this.selectIndex = index;
			},
			change1() {

			},
			log1() {

			},
			onConfirm1() {

			},
			change2() {

			},
			log2() {

			},
			onConfirm2(val) {
				if(!this.value1) {
					this.show1 = true;
					this.alert_title = '请先选择开始日期';
					this.value1 = this.value2 = '';
					return;
				}
				this.value2 = val;
				//计算相差天数
				let s1 = this.value1;
				let s2 = this.value2;
				s1 = new Date(s1.replace(/-/g, "/"));
				s2 = new Date(s2.replace(/-/g, "/"));
				let days = s2.getTime() - s1.getTime();
				if(days <= 0) {
					this.show1 = true;
					this.alert_title = '结束日期不能小于开始日期';
					this.value2 = '';
					return;
				}
				if(days !== days || days <= 0) {
					this.differ_days = 0;
				} else {
					this.differ_days = parseInt(days / (1000 * 60 * 60 * 24));
				}
				//console.log(this.differ_days);
			},
			onShow() {

			},
			//时段环比波动切换
			onItemClick2(index) {
				this.selectIndex2 = index;
			},
		}
	}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="less">
	.time_meal {
		.content{
			.time_nav {
				background: #fff;
				margin-bottom: .18rem;
				.select_dates {
					height: 1.2rem;
					background: #fff;
					display: flex;
					justify-content: space-around;
					align-items: center;
					padding-bottom: .2rem;
					border: 1px solid #f0f0f0;
				}
			}
			.statistics_num {
				height: 1.5rem;
				display: flex;
				align-items: center;
				background: #fff;
				.business_volume {
					width: 50%;
					padding-left: .34rem;
					p:nth-of-type(1) {
						display: flex;
						align-items: center;
						font-size: .26rem;
						color: #909090;
						letter-spacing: .02rem;
						span {
							color: #e25251;
							border: 1px solid #e25251;
							font-size: .2rem;
							padding: 0 .02rem;
							border-radius: .02rem;
							margin-left: .02rem;
						}
						img {
							width: .26rem;
							height: .26rem;
							margin-left: .12rem;
						}
					}
					p:nth-of-type(2) {
						text-align: left;
						margin-top: .18rem;
						font-size: .22rem;
						color: #191919;
						span {
							font-size: .36rem;
							font-weight: 700;
						}
					}
				}
				.news {
					border-right: 1px solid #efefef;
				}
			}
			.ratio_datas{
				background: #fff;
				.time_place_nav{
					margin-top: .18rem;
				}
				.ratio_data_1{
					.time1{
						display: flex;
						justify-content: space-between;
						padding: .3rem .26rem;
						border-bottom: 1px solid #f0f0f0;
						p:nth-of-type(1){
							font-size: .26rem;
							color: #1f1f1f;
						}
						p:nth-of-type(2){
							font-size: .22rem;
							color: #8c8c8c;
						}
					}
				}
			}
		}	
	}
</style>